<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="app">
		    <!--
			<child @greet="sayHello"></child>
			-->
			<child @greet="sayHello('xxx')"></child>
		</div>
	
	    <script type=text/javascript src="../../vue.js"></script>
		<script>
            const app = Vue.createApp({
                methods: {
            	  	// 自定义事件的附加参数会自动传入方法
            	  	sayHello(name){
            	  		alert("Hello, " + name);
            	  		console.log('abc');
            	  	}
                } 
            });
		    
			app.component('child', {
				data: function(){
					return {
						name: '张三'
					}
				},
				methods: {
					handleClick(){
						this.$emit('greet', this.name);
					}
				},
	            template: '<button @click="handleClick">开始欢迎</button>'
    		});
    		app.mount('#app');
  		
		</script>
	</body>
</html>